<template>
  <div class="custom-upload">
    <div class="file-preview" @click="triggerFileInput">
    <img
      v-if="files[0] && files[0].preview"
      :src="files[0].preview"
      alt="身份证正面"
    />
    <span v-else>上传身份证正面</span>
    <button v-if="files[0]" @click.stop="removeFile(0)" class="remove-button">删除</button>
  </div>

  <div class="file-preview" @click="triggerFileInput">
    <img
      v-if="files[1] && files[1].preview"
      :src="files[1].preview"
      alt="身份证反面"
    />
    <span v-else>上传身份证反面</span>
    <button v-if="files[1]" @click.stop="removeFile(1)" class="remove-button">删除</button>
  </div>
    <input
      type="file"
      ref="fileInput"
      @change="handleFileChange"
      style="display: none"
    />

    <button
      @click="submitFiles"
      class="submit-button"
      :disabled="!isBothFilesUploaded"
    >提交</button>
  </div>
  
</template>


<script>
import axios from 'axios';

export default {
  props: {
    user_info: {
      type: Object,
    },
    token: {
      type: String,
    }
  },
  data() {
    return {
      files: [] // 确保初始化为空数组
    };
  },
  computed: {
    isBothFilesUploaded() {
      return this.files.every((file) => file.file !== null);
    }
  },
  methods: {
    triggerFileInput() {
      this.$refs.fileInput.click();
    },
    handleFileChange(event) {
      const file = event.target.files[0];
      if (file) {
        const previewUrl = URL.createObjectURL(file);
        const fileIndex = this.files.length;

        if (fileIndex < 2) {
          this.files[fileIndex] = { file, preview: previewUrl };
        }
        this.$refs.fileInput.value = null;
      }
    },
    removeFile(index) {
      this.files.splice(index, 1);
    },
    async submitFiles() {
      if (this.isBothFilesUploaded) {
        const formData = new FormData();
        console.log("this.user_info.xingming：" + this.user_info.xingming)
        formData.append('xingming', this.user_info.xingming);
        formData.append("idcard", this.user_info.idcard);
        this.files.forEach((fileData) => formData.append('files', fileData.file));
        try {
          const response = await axios.post('http://172.16.7.12:8000/upload_image', formData, {
            headers: { 
              'Content-Type': 'multipart/form-data',
              'Authorization': this.token
            }
          });
          if (response.data) {
            console.log('Files uploaded successfully:', response.data);
          }
        } catch (error) {
          console.error('File upload failed:', error);
        }
      } else {
        alert('请上传身份证的正反面');
      }
    }
  }
};
</script>

<style scoped>
.id-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 400px;
  margin: 0 auto;
}

.id-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.upload-label {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 5px;
}

.file-preview {
  position: relative;
  width: 100%;
  max-width: 200px;
  height: 130px;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.file-preview img {
  max-width: 100%;
  max-height: 100%;
}

.upload-button,
.submit-button {
  padding: 10px 15px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
}

.upload-button:hover,
.submit-button:hover {
  background-color: #45a049;
}

.remove-button {
  position: absolute;
  top: 5px;
  right: 5px;
  padding: 5px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.remove-button:hover {
  background-color: #d43536;
}

.submit-button[disabled] {
  background-color: #ccc;
  cursor: not-allowed;
}

.custom-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.file-preview {
  width: 200px;
  height: 200px;
  border: 2px dashed #ccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 10px;
  position: relative;
}

.file-preview img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 5px;
}

.remove-button {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #ff4d4f;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  padding: 5px 10px;
}

.remove-button:hover {
  background-color: #d43536;
}

.submit-button {
  padding: 10px 20px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submit-button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

</style>
